<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>层叠上下文的创建-案例解析</title>
    </head>

    <body>

        <!-- 
        条件(层叠上下文元素)  - 层叠顺序
        1.html 根层叠上下文
        2.position  +  z-index: 不为auto
        3.CSS3属性  -  
        + flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
        + opacity 属性值小于 1 的元素;
        + transform
        + filter

        -->

        <!-- 案例解析一  -->

        <!-- 层叠上下文元素 img/mm1  img/mm2
        z-index:2  >  z-index：1
        -->
        <div style="position:relative; z-index:auto;">
            <img src="images/mm1.jpg" style="position:absolute; z-index:2;" title='mm1'>
        </div>
        <div style="position:relative; z-index:auto;">
            <img src="images/mm2.jpg" style="position:relative; z-index:1;" title='mm2'>
        </div>

        <hr>






        <!-- 案例解析二 -->

         <!-- 层叠上下文元素  2个 div  img/mm1  img/mm2
            层叠等级相等 :  后来居上
        -->
        <div style="position:relative; z-index:0;">
            <img src="images/mm1.jpg" style="position:absolute; z-index:2;">
        </div>
        <div style="position:relative; z-index:0;">
            <img src="images/mm2.jpg" style="position:relative; z-index:1;">
        </div>
    </body>
</html>